<template>
  <div class="divMax">
    <div class="div_p">
      <p>
        <span>修改登录密码</span>
      </p>
    </div>

    <div class="div_steps">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="身份验证"></el-step>
        <el-step title="设置新密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>

    <div class="finance-4" v-if="div4">
      <el-form>
        <div class="grid-content">
          <p>
            <span>
              已绑定的手机号：
              {{ user_phone }}
            </span>
          </p>
        </div>

        <div class="grid-content bg-purple">
          <el-form-item prop="phoneCode" class="pr">
            <el-input
              v-model="code"
              placeholder="短信验证码"
              prefix-icon="el-icon-user"
              style="width: 72%"
              clearable
            ></el-input
            >&nbsp;&nbsp;&nbsp;
            <button
              @click.prevent="getShortMessageCode()"
              :class="{ code_btn: ppt, code_btn1: !ppt }"
              :disabled="!show"
            >
              <span v-show="show">获取验证码</span>
              <span v-show="!show">{{ count }} 秒后可重发</span>
            </button>
          </el-form-item>
        </div>
      </el-form>

      <div class="div-button">
        <el-button type="danger" @click="submitForm()" style="width: 100%"
          >下一步</el-button
        >
      </div>
    </div>

    <div class="finance-4" v-if="div5">
         <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
       <div class="grid-content bg-purple">
            <el-form-item prop="user_pwd" class="pr">
              <el-input
                v-model="ruleForm.user_pwd"
                placeholder="密码"
                prefix-icon="el-icon-lock"
                show-password
                clearable
              ></el-input>
            </el-form-item>
          </div>

          <div class="grid-content bg-purple">
            <el-form-item prop="user_pwds" class="pr">
              <el-input
                v-model="ruleForm.user_pwds"
                placeholder="确认密码"
                prefix-icon="el-icon-lock"
                show-password
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </el-form>

      <div v-if="button2" class="div-button">
        <el-button type="danger" @click="submitForms()" style="width: 100%"
          >下一步</el-button
        >
      </div>
    </div>

    <div class="finance-5" v-if="div6">
      <div v-if="button3" class="div-button5">
        <div class="imgdiv">
          <img src="../assets/u3778.png" alt="" />
        </div>

        <div>
          <p>
            <span> 恭喜你，新密码设置成功 </span>
          </p>
        </div>
          
        <div class="bu">
          <el-button type="danger" @click="submitFormss()" style="width: 100%"
            >修改成功</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.user_pwds !== "") {
          this.$refs.ruleForm.validateField("user_pwds");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.user_pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm:{
      user_pwd: "",
      user_pwds: "",
      },
      code: "",
      
      user_phone: "",
      checked: false,
      active: 0,
      div4: true,
      div5: false,
      div6: false,
      button1: true,
      button2: false,
      button3: false,
      show: true,
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
      count2:'',
          rules: {
			user_pwd: [
			{ required: true, message: '请输入密码', trigger: 'blur' },
			{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
			{ validator: validatePass, trigger: 'blur' }
			],
			user_pwds:[
			{ required: true, message: '请确认密码', trigger: 'blur' },
			{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
			{ validator: validatePass2, trigger: 'blur', required: true }
			],
		}
    };
    
  },
  created() {
    this.initialize();
    this.countDown() // 倒计时
  },
  methods: {
    
    getShortMessageCode() {
      this.ppt = !this.ppt;
      //axios请求
      // console.log(this.form.phone);
      axios({
        url: "/api/user/smsverification",
      });
      console.log(1111111111111);
      console.log(!this.timer);
      // 验证码倒计时
      if (!this.timer) {
        console.log(this.timer);
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.ppt = !this.ppt;
          }
        }, 1000);
      }
    },
    //下一步
    submitForm() {
      if (this.code != null && this.code != "" && this.code.length != 0) {
        axios({
          url: "api/user/updateUserPwd",
          method: "POST",
          params: {
            code: this.code,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (this.active++ > 2) this.active = 0;
            this.div4 = false;
            this.div5 = true;
            this.button1 = false;
            this.button2 = true;
          } else {
            this.$message({
              type: "warning",
              message: res.data.message,
            });
            return;
          }
        });
      } else {
        this.$message({
          type: "warning",
          message: "请输入验证码",
        });
        return;
      }
    },

    submitForms() {
      // this.div5 = false;
      // this.div6 = true;
      // this.button3 = true;
      // if (this.active++ > 2) this.active = 0;
      // if (this.active++ > 2) this.active = 0;
      if (
        this.ruleForm.user_pwd != "" &&
        this.ruleForm.user_pwd.length >= 6 &&
        this.ruleForm.user_pwd != null
      ) {
        if (this.ruleForm.user_pwd != this.ruleForm.user_pwds) {
          this.$message({
            type: "warning",
            message: "两次密码不一样",
          });
          return;
        } else {
          axios({
            url: "api/user/updateUserPassward",
            method: "POST",
            params: {
              user_pwd: this.ruleForm.user_pwd,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.div5 = false;
              this.div6 = true;
              this.button3 = true;
              if (this.active++ > 2) this.active = 0;
              if (this.active++ > 2) this.active = 0;
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
              return;
            }
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请输入六位以上的密码",
        });
        return;
      }
    },

    submitFormss() {
      
      axios({
        url: "/api/user/removeUser",
        mounted: "get",
        traditional: true,
      }).then((res) => {
        if (res.data == true) {
          this.$router.push({ path: "login" });
          this.$message({
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$message.error("网络延迟，请重试！！！");
        }
      });
    },

    //页面加载时间
    initialize() {
      axios({
        url: "/api/user/findUserByPhone",
      }).then((res) => {
        console.log(res.data.data);
        let phone = res.data.data.user_phone;

        this.user_phone = phone.replace(phone.slice(3, 7), "****");

        console.log(this.form);
      });
    },
    
  },
};
</script>

<style scoped>
.code_btn {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn1 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  background-color: #cccccc;
  -webkit-border-radius: 5px;
}
.divMax {
  height: 600px;
}
.div_p p {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-style: normal;
  font-weight: 700;
  margin-left: 30px;
  width: 93%;
  height: auto;
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}
.div_steps {
  position: absolute;
  width: 45%;
  left: 35%;
  top: 40%;
}
.finance-4 {
  position: absolute;
  width: 386px;
  height: 290px;
  left: 45%;
  top: 420px;
  background-color: transparent;
}
.finance-5 {
  position: absolute;
  width: 386px;
  height: 290px;
  left: -280px;
  top: 800px;
  background-color: transparent;
}
.finance-5 p {
  margin-top: 30px;
  margin-left: 100px;
  margin-bottom: 20px;
}
.imgdiv {
  margin-top: -70px;
  margin-left: 160px;
}
.grid-content p {
  margin-left: 30px;
  margin-top: -30px;
  margin-bottom: 40px;
}
</style>